<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link rel="stylesheet" href="./css/index.css" />
        <title>第一个前端实战项目</title>
    </head>
    <body>
        <div id="backgroup"></div>
            <header>
                <div id="headerContent" class="content">
                    <ul id="leftUl" class="headerUl">
                        <li class="headerLi">请登录</li>
                        <li class="headerUlSeparate">|</li>
                        <li class="headerLi">注册</li>
                        <li class="headerUlSeparate">|</li>
                        <li class="headerUlImg"><img src="./img/wechat.png" alt="wechat"></li>
                        <li class="headerLi">微信登录</li>
                    </ul>
                    <ul id="rightUl" class="headerUl">
                        <li class="headerUlSpecialChar">&#9635</li>
                        <il class="headerLi">二维码</il>
                        <li class="headerUlSeparate">|</li>
                        <li class="headerUlSpecialChar">&#10084</li>
                        <il class="headerLi">收藏本站</il>
                        <li class="headerUlSeparate">|</li>
                        <il class="headerLi">我的资料</il>
                        <li class="headerUlSeparate">|</li>
                        <il class="headerLi">我的订单</il>
                    </ul>
                </div>
            </header>
            <nav>
                <div id="navContent" class="content">
                    <img src="./img/Web.png" id="navImgWeb" alt="web">
                    <ul class="ul">
                        <li id="redBoxSpecialChar" class="li">
                            &#10021
                        </li>
                        <li id="redBoxText" class="li">
                            商品分类
                        </li>
                        <li id="lowerMiddleLiFirst" class="li">首页</li>
                        <li class="li">电脑整机</li>
                        <li class="li">办公设备</li>
                        <li class="li">办公耗材</li>
                        <li class="li">设备租赁</li>
                        <li class="li">积分商城</li>
                        <li class="li">123123</li>
                        <li id="lowerMiddleLiLast" class="li">
                            <span id="phoneLogo">&#9990</span> 
                            <span id="text">采购热线</span> 
                            <span id="phoneNumber">18062698287</span>
                        </li>
                    </ul>
                    <input type="searchInput" id="searchInput" class="search" placeholder="&nbsp&nbsp&nbsp请输入您所需要的商品">
                    <button id="searchButton" class="search">搜索</button>
                    <ul id="underSearchUl">
                        <li class="underSearchUlIl" id="firstLi">无线打印</li>
                        <li class="underSearchUlIl">A4复印纸</li>
                        <li class="underSearchUlIl">硒鼓</li>
                        <li class="underSearchUlIl">墨盒</li>
                        <li class="underSearchUlIl">笔记本电脑</li>
                        <li class="underSearchUlIl">复印机租赁</li>
                    </ul>
                    <div id="shoppingCart">
                        <img id="img" src="./img/shoppingCart.png" alt="购物车">
                        <text id="text">我的购物车</text>
                        <img id="arrowDown" src="./img/arrowDown.png" alt="向下的箭头">
                    </div>
                    <div id="redBox"></div>
                </div>
            </nav>
            <hr/>
            <article>
                <div id="articleContent" class="content"></div>
            </article>
            <footer>
                <div id="footerContent" class="content"></div>
            </footer>
        
    </body>
</html>
